<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
		<title>Screens</title>
	</head>
<body>
<div id="screens">
	<h1>Screens</h1>
	<div>
		<a href="#"><img alt="leftImg" src="Resources/Images/Arrow-left.png" width="100" height="60"/></a>
		<a href="#"><img alt="stopImg" src="Resources/Images/Arrow-stop.png" width="100" height="60"/></a>
		<a href="#"><img alt="rightImg" src="Resources/Images/Arrow-right.png" width="100" height="60"/></a><br/>
	</div>
	<div>
		<img alt="showImg" src="#"/>
	</div>
</div>

<script type="text/javascript">
	// Initialise
	var images = new Array();
	images[0] = "Resources/Images/elfe.png";
	images[1] = "Resources/Images/orc.png";
	images[2] = "Resources/Images/dwarf.png";
	var count = 0;
	var cycle = true;
	
	// Display on load
	$('#screens>div:eq(1)>img').attr({src: images[count]});
	
	// create Cycle
	window.setInterval(function(){
			if (cycle == true)
			{
				if (images.length == count)
					count = 0;
				else
					count++;
				$('#screens>div:eq(1)>img').attr({src: images[count]});
			}
		}
		, 5000);
	
	// Buttons
	// Play/Stop
	$('#screens>div:eq(0)>a:eq(1)').click(function(){
		if (cycle == true)
		{
			$('#screens>div:eq(0)>a:eq(1)>img').attr({src: 'Resources/Images/Arrow-play.png'});
			cycle = false;
		}
		else
		{
			$('#screens>div:eq(0)>a:eq(1)>img').attr({src: 'Resources/Images/Arrow-stop.png'});
			cycle = true;
		}
	});
	
	// Previous
	$('#screens>div:eq(0)>a:eq(0)').click(function(){
		count--;
		if (count == -1)
			count = images.length - 1;
		$('#screens>div:eq(1)>img').attr({src: images[count]});
	});
	
	// Next
	$('#screens>div:eq(0)>a:eq(2)').click(function(){
		count++;
		if (images.length == count)
			count = 0;
		$('#screens>div:eq(1)>img').attr({src: images[count]});
	});
</script>
</body>